import React, {FC, useEffect} from "react";
import {message, Space, Typography} from "antd";
import { UserAddOutlined } from "@ant-design/icons";
import styles from "./Register.module.scss";
import { Button, Checkbox, Form, Input } from "antd";
import {Link, useNavigate} from "react-router-dom";
import { LOGIN_PATH } from "../../router";
import {useRequest} from "ahooks";
import {registerUserInfoServe} from "../../services/user";

const { Title } = Typography;

type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
  rePassword?: string;
  naLable?: string;
};




const Register: FC = () => {

const  nav = useNavigate();

  //这里的values是传进来的，是onfinsh里面带有的
  const {run}  =useRequest(async  values=>{
             const {username,password,naLable}  = values;
             const data = await registerUserInfoServe(username,password,naLable)
             return data;
  },{
    manual:true,
    onSuccess(){
      message.success("注册成功");
      nav(LOGIN_PATH);
    }
  })


  function onFinish(values:any) {
   // const {username,password,remember} =value || {};
    run(values);
  }
  function onFinishFailed() {
    alert("失败");
  }
  return (
    <div className={styles.container}>
      <div>
        <Space>
          <Title level={3}>
            <UserAddOutlined />
          </Title>
          <Title level={3}>注册页面</Title>
        </Space>
      </div>

      <div>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off">
          <Form.Item<FieldType>
            label="用户名"
            name="username"
            rules={[{ required: true, message: "输入用户名" },
              {type:"string",min:1,max:20,message:"字符长度在5到20之间"},]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="密码"
            name="password"
            rules={[{ required: true, message: "输入密码!" },
              {type:"string",min:5,max:20,message:"字符长度在5到20之间"},
              // {pattern: /^\w+$/, message:"字母数字下划线"}
              {pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d\W]+$/,
                message: "必须包含字母和数字"
              }
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item<FieldType>
            label="确认密码"
            dependencies={["password"]}
            name="rePassword"
            rules={[{ required: true, message: "确认密码!" },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  } else {
                    return Promise.reject(new Error("两次输入的密码不一致!"));
                  }
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item<FieldType>
            label="呢称"
            name="naLable"
            rules={[{ required: false, message: "输入昵称" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            name="remember"
            valuePropName="checked"
            wrapperCol={{ offset: 8, span: 16 }}
          >
            {/*// TODO 注册页记住我功能暂时未实现*/}
            <Checkbox>记住我</Checkbox>
          </Form.Item>


          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                注册
              </Button>
              <Link style={{color:"black"}} to={LOGIN_PATH}>已有账户-登入</Link>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
export default Register;
